import type { Theme, UserDropdownStyles } from './dropDownType';

// 默认主题配置
export const defaultTheme: Theme = {
    colors: {
        primary: '#5865F2',
        primaryDark: '#4752C4',
        secondary: '#3BA55D',
        inputBg: '#40444B',
        bgPrimary: '#1e1f29',
        bgSecondary: '#2a2b36',
        bgTertiary: '#3a3b45',
        bgDark: '#1E2025',
        accentPrimary: '#5865F2',
        accentSecondary: '#7c85e24f',
        textPrimary: '#ffffff',
        textSecondary: '#b9bbbe',
        textTertiary: '#72767d',
        success: '#3ba55d',
        warning: '#faa81a',
        danger: '#ed4245',
        online: '#3ba55d',
        idle: '#faa81a',
        dnd: '#ed4245',
        offline: '#747f8d',
    },
    borderRadius: '8px',
    transition: 'all 0.2s ease',
};

// 创建样式对象的函数（支持主题定制）
export const createUserDropdownStyles = (theme: Theme = defaultTheme): UserDropdownStyles => ({
    list: {
        // position: 'absolute',
        // right: '0',
        // top: '100%',
        // minWidth: '220px',
        backgroundColor: theme.colors.bgSecondary,
        borderRadius: theme.borderRadius,
        boxShadow: '0 4px 12px var(--accent-secondary)',
        overflow: 'hidden',
        // zIndex: 100,
        transition: theme.transition,
        border: `1px solid ${theme.colors.bgTertiary}`,
        outline: 'none',
    },

    listItem: {
        padding: '12px 16px',
        color: theme.colors.textPrimary,
        cursor: 'pointer',
        transition: theme.transition,
        display: 'flex',
        alignItems: 'center',
        gap: '12px',

        // 伪类通过事件或状态实现
        hover: {
            backgroundColor: theme.colors.bgTertiary,
        },

        active: {
            backgroundColor: theme.colors.accentSecondary,
        },

        danger: {
            color: theme.colors.danger,
            hover: {
                backgroundColor: 'rgba(237, 66, 69, 0.1)',
            },
        },

        success: {
            color: theme.colors.success,
        },

        disabled: {
            color: theme.colors.textTertiary,
            cursor: 'not-allowed',
            opacity: 0.7,
        },
    },

    divider: {
        height: '1px',
        backgroundColor: theme.colors.bgTertiary,
        margin: '4px 0',
    },

    header: {
        padding: '8px 16px',
        color: theme.colors.textTertiary,
        fontSize: '0.85em',
        textTransform: 'uppercase',
        letterSpacing: '0.5px',
    },
});